<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>克隆(浅拷贝/深度拷贝)</title>
  </head>
  <body>
    <script>
      /*
        浅拷贝只是简单的复制，对对象里面的对象属性和数组属性只是复制了地址，并没有创建新的相同对象或者数组
        */
      var obj1 = {
        age: 10,
        sex: "男",
        car: ["奔驰", "宝马", "特斯拉", "奥拓"],
        wife: {
          name: "小黄",
        },
      };
      //另一个对象
      var obj2;

      //写一个函数,作用:把一个对象的属性复制到另一个对象中,浅拷贝
      //把a对象中的所有的属性复制到对象b中
      function shallowCopy(originObj) {
        let targetObj = {};
        for (let key in originObj) {
          targetObj[key] = originObj[key];
        }
        return targetObj;
      }
      obj2 = shallowCopy(obj1);
      console.log(obj2); //简单复制、引用值的地址是一样的
      console.log(obj1); //
      //改变一个对象属性另一个跟着一起变
      obj1.car.push("奥迪");
      console.log(obj2.car);

      /*
      深拷贝
      */
      //1.判断是不是原始值
      //2.判断是数组还是对象
      //3.建立相应的数组或对象
      //4.不是引用值直接拷贝，是的话调用deepCopy循环拷贝
      function deepCopy(originObj, targetObj) {
        //容错处理 
        var targetObj = targetObj || {};
        //遍历对象
        for (const key in originObj) {
          //判断属性是否是自己的，原型上的属性不要
          if (Object.hasOwnProperty.call(originObj,key)) {
            //判断属性值是否是原始值，是原始值就直接拷贝
            if (typeof originObj[key] != "object") {
              targetObj[key] = originObj[key];
            } else {
              //判断属性值的类型
              // if (Object.prototype.toString.call(targetObj[key]) =="[object Array]") {
              //   targetObj[key] = [];
              // }else{
              //   targetObj[key] = {};
              // }
              targetObj[key] = (Object.prototype.toString.call(targetObj[key]) =="[object Array]")?[]:{}
              deepCopy(originObj[key],targetObj[key]);
            }
          }
        }
        return targetObj
      }

      obj2 = deepCopy(obj1);
    </script>
  </body>
</html>
